<template>
  <div class="login">
    <!-- 顶部导航条 -->
    <van-nav-bar title="登陆" />
    <van-form
      @failed="onFailed"
      @submit="onSubmit"
    >
      <!-- 表单区域 -->
      <van-cell-group>
        <van-field
          v-model.trim="userInfo.mobile"
          type="tel"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ pattern: /^1\d{10}$/, message: '手机号必填' }]"
        />
        <van-field
          v-model.trim="userInfo.code"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ pattern: /^\d{6}$/, message: '必须填写密码' }]"
        />
      </van-cell-group>

      <!-- 按钮 -->
      <div class="btn-warp">
        <van-button type="info">登陆</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, getProfile } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    return {
      userInfo: {
        mobile: '13912345678', // 初始帐号
        code: '246810' // 固定密码
      }
    }
  },
  methods: {
    onSubmit () {
      // 验证成功
      this.hLogin()
    },
    onFailed () {
      // 验证失败
      console.log('验证失败')
    },
    async hLogin () {
      // 解析出用户名和密码
      const { mobile, code } = this.userInfo
      // 显示loading
      this.$toast.loading({
        duration: 0, // 持续展示 toast, 不会自已关闭
        overlay: true, // 整体加一个遮罩
        message: '登陆中....'
      })
      try {
        // 1 发送请求登录返回token
        const res = await login(mobile, code)

        // 给出成功的提示， 它会把前面的loading替换掉
        this.$toast.success('欢迎' + this.userInfo.code)

        // 2 登陆成功 把res中的token信息保存到vuex中
        this.$store.commit('mSetTokenInfo', res.data.data)

        // 3 再发请求把个人信息也取回来，也保存在vuex中
        const userInfo = await getProfile()

        // 4 把userInfo保存在vuex中 由于vuex中的userInfo模块是有namespaced的，所以在前面要加上模块名
        this.$store.commit('userInfo/mSetUserInfo', userInfo.data.data)

        // 5 根据当前路由参数，决定跳到哪里去
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
      } catch (err) {
        console.log(err)
        this.$toast.fail('登陆失败')
      }
    }
  }
}

</script>

<style lang="less">
// 按钮
.btn-warp {
  padding: 0 20px;
  .van-button {
    width: 100%;
    background-color: #6db4fd;
    color: #fff;
  }
}
</style>
